<template>
  <div id="shoppingCart">
    <div id="top">
      <i class="el-icon-shopping-cart-full" style="color:rgb(255, 103, 0)"></i>
      <p>我的购物车</p>
      <p>温馨提示:产品是否购买成功,以最终下单为准哦,请尽快结算</p>
    </div>
    <div id="bottom" v-if="shoppingCartData.length>0">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
        :data="shoppingCartData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="35" label="全选">
      
        </el-table-column>
        <el-table-column label="全选" width="50"></el-table-column>
        <el-table-column width="120" prop="productImg">
          <template v-slot="scope">
            <img :src="'http://39.100.7.70:81/'+scope.row.productImg" alt />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="280" prop="productName"></el-table-column>
        <el-table-column label="单价" width="140" prop="price"></el-table-column>
        <el-table-column label="数量" width="190">
          <template v-slot="scope">
            <el-input-number
              v-model="scope.row.num"
              :min="1"
              :max="scope.row.maxNum"
              @change="handleChange(scope.row.id,scope.row.productID,scope.row.num)"
            ></el-input-number>
          </template>
        </el-table-column>
        <el-table-column label="小计" width="140">
          <template v-slot="scope">
            <p>{{scope.row.price*scope.row.num}}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template v-slot="scope">
            <i class="el-icon-error" @click="scope.row.delDiago=true"></i>
            <el-popover placement="top" width="160" v-model="scope.row.delDiago">
              <p>确定删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.delDiago== false">取消</el-button>
                <el-button type="primary" size="mini" @click="deleteShoppingCart(scope.row)">确定</el-button>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>

      <div style="height:20px;background-color: #f5f5f5"></div>
      <!-- 购物车底部导航条 -->
      <el-card>
        <div>
          <div class="left">
            <p @click="$router.push('/shopAll')">继续购物</p>|
            <p>
              共
              <span>{{getNum}}</span>件商品,已选择
              <span>{{getCheckNum}}</span>件
            </p>
          </div>
          <div class="right">
            <p>
              合计:
              <span>{{getTotalPrice}}元</span>
            </p>
            <p v-show="getCheckNum != 0" @click="$router.push('/confirmOrder')">去结算</p>
            <p v-show="getCheckNum == 0">去结算</p>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 收藏列表为空的时候显示的内容 -->
    <div v-else class="collect-empty">
      <div class="empty">
        <h2>您的购物车还是空的！</h2>
        <p>快去购物吧！</p>
      </div>
    </div>
  </div>
</template>

<script>
import Api from "@/api/Shopping.js";
import { mapGetters, mapActions } from "vuex";
import { Notification } from "element-ui";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data() {
    //这里存放数据
    return {
      productID: "",
      delDiago: false
    };
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelectionChange(val) {
      console.log(val);

      // this.multipleSelection = val;
      this.updateShoppingCart(val);
    },
    ...mapActions(["updateShoppingCart", "deleteShoppingCarts", "checkAll"]),
    // 修改商品数量的时候调用该函数
    handleChange(key, productID, num) {
      console.log(key, productID, num);
      Api.updateShoppingCart({
        user_id: this.$store.state.user_id,
        product_id: productID,
        num: num
      })
        .then(res => {
          console.log(res);

          switch (res.data.code) {
            case "001": {
              // // 提示更新成功信息
              Notification.success({ title: "成功", message: res.data.msg });
              break;
            }
          }
        })
        .catch(err => {
          return Promise.reject(err);
        });
    },
    // checkChange(key, num) {
    //   console.log(key, num);

    //   // 更新vuex中购物车商品是否勾选的状态
    //   this.updateShoppingCart({ key: key, val: num });
    // },
    // 向后端发起删除购物车的数据库信息请求
    deleteShoppingCart(item) {
      Api.deleteShoppingCart({
        user_id: this.$store.state.user_id,
        product_id: item.productID
      }).then(res => {
        console.log(res);
        if (res.data.code == "001") {
          this.deleteShoppingCarts(item.id);
          this.delDiago = false;
          Notification.success({ title: "成功", message: res.data.msg });
        } else {
          console.log(item.id, item.productID);
        }
      });
    }
  },
  computed: {
    ...mapGetters([
      "shoppingCartData",
      "getCheckNum",
      "getTotalPrice",
      "getNum"
    ])
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log(this.shoppingCartData);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
#shoppingCart {
  width: 100%;
  display: flex;
  flex-direction: column;
  #top {
    width: 100%;
    height: 98px;
    padding: 0 200px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #fe6700;
    i {
      font-size: 30px;
      font-weight: 700 !important;
    }
    p {
      &:nth-of-type(1) {
        font-size: 30px;
        color: #424241;
        margin: 0 16px 0 12px;
      }
      &:nth-of-type(2) {
        margin-top: 20px;
        font-size: 12px;
        color: #777575;
      }
    }
  }
  #bottom {
    flex: 1;
    padding: 20px 200px;
  }
}
img {
  width: 80px;
  height: 80px;
}
.el-input-number {
  width: 130px !important;
}
/deep/.el-table td,
/deep/.el-table th {
  text-align: center !important;
}
/deep/.el-card__body {
  padding: 0 !important;
}
.el-card {
  width: 100%;
  height: 60px;
  div {
    width: 100%;
    height: 60px;
    padding-left: 38px;
    display: flex;
    justify-content: space-between;
    .left {
      padding-left: 0px;
      width: 340px;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #eeeeef;
      p {
        font-size: 18px;
        color: #757575;
        &:nth-of-type(1) {
          margin-right: 26px;
          &:hover {
            color: red;
          }
        }
        &:nth-of-type(2) {
          margin-left: 26px;
          span {
            color: red;
          }
        }
      }
    }
    .right {
      width: 450px;
      height: 100%;
      align-items: center;
      p {
        &:nth-of-type(1) {
          font-size: 15px;
          color: red;
          span {
            font-size: 26px;
            margin-left: 10px;
          }
        }
        &:nth-of-type(2) {
          width: 228px;
          height: 100%;
          background: red;
          color: white;
          text-align: center;
          line-height: 60px;
          &:hover {
            background: #ff6700;
          }
        }
        &:nth-of-type(3) {
          width: 228px;
          height: 100%;
          background: #e0e0e0;
          color: #b0b0b0;
          text-align: center;
          line-height: 60px;
        }
      }
    }
  }
}
/* 收藏列表为空的时候显示的内容CSS */
.collect-empty {
  width: 100%;
  // padding:0 70px;
  background: #f5f5f5;
  .empty {
    height: 300px;
    padding: 0 0 130px 558px;
    margin: 65px 0 0;
    background: url(../../../src/assets/imgs/cart-empty.png) no-repeat 124px 0;
    color: #b0b0b0;
    overflow: hidden;

    h2 {
      margin: 70px 0 15px;
      font-size: 36px;
    }
    p {
      margin: 0 0 20px;
      font-size: 20px;
    }
  }
}
</style>